var tabpanel;
Ext.onReady(function() {
	// 标签panel
	tabpanel = Ext.create('Ext.tab.Panel', {
		layout : 'fit',
		resizeTabs : true,
		enableTabScroll : true,
		width : 600,
		height : 250,
		width : 400,
		height : 400,
		activeTab : 0,
		defaults : {
			autoScroll : true,
			autoScroll : true
		},
		items : [{
			title : "用户信息",
			id : "tab_userinfo",
			html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src= user/userinfo.jsp></iframe>'

		}]
	});

	// 树的panel
	var treeData = {
		root : {
			children : [{
						text : '我的账本',
						id : 'treeRoot',
						children : [{
									text : "用户信息",
									tabId : "tab_userinfo",
									url : 'user/userinfo.jsp',
									location : "我的账本->用户信息",
									leaf : true
								}, {
									text : "账目信息",
									tabId : "tab_accountinfo",
									url : 'account/accountinfo.jsp',
									location : "我的账本->账目管理",
									leaf : true
								}]
					}]
		}
	};
	var store = Ext.create('Ext.data.TreeStore', treeData);
	var treePanel = Ext.create('Ext.tree.Panel', {
				id : 'tree-panel',
				title : '我的账本',
				region : 'north',
				split : true,
				rootVisible : false,
				autoScroll : true,
				store : store,
				listeners : {
					itemclick : function(node, record) {
						if (record.raw.id == "treeRoot") {
							return;
						}
						addTab(record.raw.text, record.raw.tabId,
								record.raw.url);
						Ext.getCmp("content-panel").setTitle("当前地址："
								+ record.raw.location);
					}
				}
			});
	treePanel.expandAll();

	// 主要的布局
	Ext.create('Ext.container.Viewport', {
				layout : 'border',
				items : [new Ext.panel.Panel({
									region : 'north',
									contentEl : "north",
									collapsible : true,
									border : false,
									title : "主界面",
									layout : 'fit',
									height : 85
								}), {
							layout : 'fit',
							region : 'south',
							html : "神马都是浮云，你信不信？反正我是信了，"
						}, {
							collapsible : true,
							split : true,
							region : 'west',
							width : 300,
							maxWidth : 300,
							title : '系统导航',
							layout : "accordion",
							layoutConfig : {
								animate : true,
								activeOnTop : true
							},
							items : [treePanel]
						}, {
							id : 'content-panel',
							region : 'center',
							layout : 'fit',
							title : '当前地址：我的账本->用户信息',
							items : [tabpanel]
						}],
				renderTo : Ext.getBody()
			});

	// 主题
	var themeButton = new Ext.Button({
				text : '主题',
				iconCls : 'themeIcon',
				iconAlign : 'left',
				scale : 'medium',
				autoWidth : true,
				tooltip : '<span style="font-size:12px">切换系统主题</span>',
				pressed : true,
				arrowAlign : 'right',
				renderTo : 'themeDiv'
			});
	// 配置
	var mainMenu = new Ext.menu.Menu({
				id : 'mainMenu',
				items : [{
							text : '修改个人设置',
							iconCls : 'userIcon',
							handler : function() {
								updateUserInit();
							}
						}]
			});
	var configButton = new Ext.Button({
				text : '首选项',
				iconCls : 'config_25_25Icon',
				iconAlign : 'left',
				scale : 'medium',
				autoWidth : true,
				tooltip : '<span style="font-size:12px">首选项设置</span>',
				pressed : true,
				renderTo : 'configDiv',
				menu : mainMenu
			});

	// 注销
	var closeButton = new Ext.Button({
				iconCls : 'cancel_25_25Icon',
				iconAlign : 'left',
				scale : 'medium',
				autoWidth : true,
				tooltip : '<span style="font-size:12px">注销用户</span>',
				pressed : true,
				arrowAlign : 'right',
				renderTo : 'closeDiv',
				handler : function() {
					window.open("user/base!logout.action", "_self");
				}
			});
});

/**
 * 创建节点
 * 
 * @param {}
 *            closable
 */
function addTab(title, tabId, url) {
	var tab = tabpanel.getComponent(tabId);
	if (!tab) {
		tabpanel.add({
			title : title,
			iconCls : 'tabs',
			id : tabId,
			closable : true,
			layout : 'fit',
			html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src='
					+ url + '></iframe>'
		}).show();
	}
	tabpanel.setActiveTab(tab);
}
